<template>
  <div>
    <div class="header"></div>
    <ul>
      <li class="header_photo"></li>
      <li class="header_top">
        <div :style="{ textAlign: 'center', margin: '3rem 0 1rem' }">
          {{ person.remark }}
        </div>
        <hr />
        <div class="header_ct">
          <div>
            姓名:<span>{{ person.nickName }}</span>
          </div>
          <div>
            联系方式:<span>{{ person.phone }}</span>
          </div>
        </div>
      </li>
      <li class="header_center">
        <van-cell is-link class="cell" @click="userMessage">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <van-icon
              name="manager-o"
              size="1.2rem"
              color="blue"
              style="margin-right: 0.5rem"
            />
            <span class="title-class" style="font-size: 1rem">个人消息</span>
          </template>
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
        <van-cell is-link class="cell">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <van-icon
              name="bill-o"
              size="1.2rem"
              color="blue"
              style="margin-right: 0.5rem"
            />
            <span class="custom-title" style="font-size: 1rem">支付中心</span>
          </template>
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
        <van-cell is-link class="cell">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <van-icon
              name="manager-o"
              size="1.2rem"
              color="blue"
              style="margin-right: 0.5rem"
            />
            <span class="custom-title" style="font-size: 1rem">修改密码</span>
          </template>
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
        <van-cell is-link class="cell" @click="bbb">
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <van-icon
              name="bookmark-o"
              size="1.2rem"
              color="blue"
              style="margin-right: 0.5rem"
              center
            />
            <span class="custom-title" style="font-size: 1rem">版本信息</span>
          </template>
          <template #right-icon>
            <div><span>版本1.0</span><van-icon name="arrow" /></div>
          </template>
        </van-cell>
        <van-cell is-link class="cell">
          <template #title>
            <van-icon
              name="manager-o"
              size="1.2rem"
              color="blue"
              style="margin-right: 0.5rem"
            />
            <span class="custom-title" style="font-size: 1rem">消除缓存</span>
          </template>
          <template #right-icon>
            <van-icon name="arrow" />
          </template>
        </van-cell>
      </li>
    </ul>
    <!-- <van-dialog v-model="show" title="标题" show-cancel-button> -->
    <div class="btn">
      <van-button type="primary" size="large" color="#ccc" @click="clear"
        >退出登录</van-button
      >
    </div>
    <!-- </van-dialog> -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="wap-home" to="/about">系统功能</van-tabbar-item>
      <van-tabbar-item icon="comment" to="/expresswaybill">联系</van-tabbar-item>
      <van-tabbar-item icon="manager">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { getPersonalCenter } from "@/request/api";
export default {
  data() {
    return {
      active: 2,
      person: {},
      show: false,
    };
  },
  created() {
    getPersonalCenter().then((res) => {
      if (res.errCode == 0) {
        console.log(res.data);
        this.person = res.data;
      }
    });
  },
  methods: {
    userMessage() {
      this.$router.push("/personalmessage");
    },
    bbb() {
      this.$router.push("/versioninformation");
    },
    clear() {
      localStorage.removeItem("token");
      this.$router.push('/home')
    },
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 10rem;
  background: blue;
  position: relative;
}
.header_top {
  width: 90%;
  height: 9rem;
  position: absolute;
  top: 5.5rem;
  left: 1rem;
  background: #fff;
  border-radius: 0.8rem;
  padding: 0.8rem;
  box-sizing: border-box;
}
.header_photo {
  position: absolute;
  top: 2.5rem;
  left: 8.5rem;
  z-index: 9999;
  display: inline-block;
  width: 6rem;
  height: 6rem;
  background: url("../assets/头像.png") no-repeat;
  background-size: 100% 100%;
}
.header_ct {
  display: flex;
  justify-content: space-between;
  margin: 0.8rem auto;
}
.header_center {
  width: 90%;
  margin: 5rem auto 0;
  background: #fff;
  border-radius: 0.8rem;
}
.btn {
  width: 90%;
  margin: 4rem auto;
}
</style>